<template>
  <div class="setting-container">
    <div class="divider">
      <span>元素设置</span>
    </div>
    <div class="container">
      <el-form label-width="80" :model="widget">
        <el-form-item label="文本内容：">
          <el-input v-model="widget.text" />
          <!-- <el-input
            v-model="widget.text"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
          /> -->
        </el-form-item>
        <el-form-item label="字体颜色：">
          <div class="sketch-container">
            <div
              class="sketch"
              :style="{ backgroundColor: widget.color }"
              @click="showSketchHandler('color')"
            ></div>
            <Sketch
              v-model="sketchColor"
              class="picker"
              :show="showSketch && sketchType === 'color'"
              @chang-button="changSketchButton($event, 'color')"
            />
          </div>
        </el-form-item>
        <el-form-item label="背景颜色：">
          <div class="sketch-container">
            <div
              class="sketch"
              :style="{ backgroundColor: widget.backgroundColor }"
              @click="showSketchHandler('bg')"
            ></div>
            <Sketch
              v-model="sketchBgColor"
              class="picker"
              :show="showSketch && sketchType === 'bg'"
              @chang-button="changSketchButton($event, 'bg')"
            />
          </div>
        </el-form-item>
        <el-form-item label="字体大小：">
          <el-input-number v-model="widget.fontSize" :min="12" />
        </el-form-item>
        <el-form-item label="字体风格：">
          <el-select
            v-model="widget.fontFamily"
            placeholder="Select"
            @change="changeFontFamily"
          >
            <el-option
              v-for="item in fontFamilys"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span :style="{ float: 'left', 'font-family': item.value }">
                {{ item.label }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行高：">
          <el-input-number v-model="widget.lineHeight" :min="12" />
        </el-form-item>
        <el-form-item label="对齐方式：">
          <el-radio-group v-model="widget.textAlign">
            <el-radio-button label="left">靠左</el-radio-button>
            <el-radio-button label="center">居中</el-radio-button>
            <el-radio-button label="right">靠右</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="字体样式：">
          <div class="style-list">
            <div
              class="style-item"
              :class="{ active: widget.fontWeight === 'bold' }"
              @click="
                changeFont(
                  'fontWeight',
                  widget.fontWeight === 'bold' ? 'normal' : 'bold'
                )
              "
            >
              <i class="iconfont icon-zitijiacu"></i>
            </div>
            <div
              class="style-item"
              :class="{ active: widget.fontStyle === 'italic' }"
              @click="
                changeFont(
                  'fontStyle',
                  widget.fontStyle === 'italic' ? 'normal' : 'italic'
                )
              "
            >
              <i class="iconfont icon-zitixieti"></i>
            </div>
            <div
              class="style-item"
              :class="{ active: widget.textDecoration === 'underline' }"
              @click="
                changeFont(
                  'textDecoration',
                  widget.textDecoration === 'underline' ? 'none' : 'underline'
                )
              "
            >
              <i class="iconfont icon-zitixiahuaxian"></i>
            </div>
            <div
              class="style-item"
              :class="{ active: widget.textDecoration === 'line-through' }"
              @click="
                changeFont(
                  'textDecoration',
                  widget.textDecoration === 'line-through'
                    ? 'none'
                    : 'line-through'
                )
              "
            >
              <i class="iconfont icon-zitishanchuxian"></i>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="宽度：">
          <el-input-number v-model="widget.width" :min="1" />
        </el-form-item>
        <el-form-item label="高度：">
          <el-input-number v-model="widget.height" :min="1" />
        </el-form-item>
        <el-form-item label="边框：">
          <el-switch
            v-model="widget.border"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="x轴坐标：">
          <el-input-number v-model="widget.x" :min="0" />
        </el-form-item>
        <el-form-item label="y轴坐标：">
          <el-input-number v-model="widget.y" :min="0" />
        </el-form-item>
        <el-form-item label="层级：">
          <el-input-number v-model="widget.zIndex" :min="0" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { Sketch } from '@ans1998/vue3-color'
  import { useEleStore } from '@/store/modules/coms'
  const Store = useEleStore()
  const { getCurrentWidget: widget } = storeToRefs(Store)
  // 选择颜色
  const sketchColor = ref(widget.value.color)
  const sketchBgColor = ref(widget.value.backgroundColor)
  const showSketch = ref(false)
  const sketchType = ref('')
  const changSketchButton = (picker: any, type: string) => {
    showSketch.value = false
    sketchType.value = type
    if (picker.isOk) {
      // sketchBgColor.value = `#${picker.hex}`
      // type === 'color'
      //   ? (widget.value.color = `#${picker.hex}`)
      //   : (widget.value.backgroundColor = `#${picker.hex}`)
      if (type === 'color') {
        sketchColor.value = `#${picker.hex}`
        widget.value.color = `#${picker.hex}`
      } else {
        sketchBgColor.value = `#${picker.hex}`
        widget.value.backgroundColor = `#${picker.hex}`
      }
    }
  }
  const showSketchHandler = (type: string) => {
    showSketch.value = true
    sketchType.value = type
    if (type === 'color') {
      sketchColor.value = widget.value.color
    } else {
      sketchBgColor.value = widget.value.backgroundColor
    }
  }
  // 字体样式
  const changeFont = (field: string, value: any) => {
    widget.value[field] = value
  }
  // 字体风格
  const fontFamilys = [
    {
      label: '宋体',
      value: 'SimSun',
    },
    {
      label: '微软雅黑',
      value: 'Microsoft Yahei',
    },
    {
      label: '仿宋',
      value: 'fangsong',
    },
    {
      label: '黑体',
      value: 'SimHei',
    },
    {
      label: '楷体',
      value: 'KaiTi',
    },
  ]
  const changeFontFamily = (value: any) => {
    changeFont('fontFamily', value)
  }
</script>

<style lang="scss" scoped>
  .setting-container {
    .divider {
      position: relative;
      margin: 10px 0;
      font-weight: 700;
      font-size: 16px;
      color: #515a6e;

      span {
        position: relative;
        z-index: 2;
        padding: 0 4px;
        margin-left: 20px;
        background-color: #fff;
      }

      &:before {
        position: absolute;
        width: 100%;
        content: '';
        display: block;
        border-top: 1px solid #e8eaec;
        top: 50%;
        transform: translateY(50%);
        z-index: 1;
      }
    }

    .sketch-container {
      position: relative;
      .sketch {
        width: 40px;
        height: 20px;
        cursor: pointer;
        border: 1px solid;
      }

      .picker {
        position: absolute;
        z-index: 99;
        top: 28px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .style-list {
      width: 180px;
      display: flex;
      border: 1px solid rgb(220, 223, 230);

      .style-item {
        display: flex;
        width: 25%;
        height: 28px;
        align-items: center;
        justify-content: center;
        border-right: 1px solid rgb(220, 223, 230);

        &:last-child {
          border-right: none;
        }

        &.active {
          color: #ffffff;
          background-color: rgb(24, 144, 255);
        }

        &:hover {
          cursor: pointer;
        }
      }
    }
  }
</style>
